<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<html >
<head>
	<meta charset="UTF-8">
	<title>凯胜项目管理系统</title>
	<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
	<link rel="stylesheet" href="static/css/style.css" type="text/css" />
	<link rel="stylesheet" href="static/css/daohang.css" type="text/css" />
	
	<link rel="stylesheet" href="static/js/slider/css/jslider.css" type="text/css">
	<link rel="stylesheet" href="static/js/slider/css/jslider.blue.css" type="text/css">
	<link rel="stylesheet" href="static/js/slider/css/jslider.plastic.css" type="text/css">
	<link rel="stylesheet" href="static/js/slider/css/jslider.round.css" type="text/css">
	<link rel="stylesheet" href="static/js/slider/css/jslider.round.plastic.css" type="text/css">
	
	<script type="text/javascript" src="static/js/slider/js/jquery-1.7.1.js"></script>
	
	<script type="text/javascript" src="static/js/slider/js/jshashtable-2.1_src.js"></script>
	<script type="text/javascript" src="static/js/slider/js/jquery.numberformatter-1.2.3.js"></script>
	<script type="text/javascript" src="static/js/slider/js/tmpl.js"></script>
	<script type="text/javascript" src="static/js/slider/js/jquery.dependClass-0.1.js"></script>
	<script type="text/javascript" src="static/js/slider/js/draggable-0.1.js"></script>
	<script type="text/javascript" src="static/js/slider/js/jquery.slider.js"></script>
	
	
	<style type="text/css">
		body{
			background-image:url("static/img/bg_main.jpg");
		}
		.bar{
			width:0%;
			transition: width 3s linear 3s;
			/* Firefox 4 */
			-moz-transition:width 3s linear 3s;
			/* Safari and Chrome */
			-webkit-transition:width 3s linear 3s;
			/* Opera */
			-o-transition:width 3s linear 3s;
			}
	</style>
</head>
<body class="body">
	<%@ include file="include/top2.jsp" %>
	<jsp:include page="include/top.jsp">
		<jsp:param value="goal" name="tag"/>
	</jsp:include>
	<div class="container">
		<div class="row">
			<!--<jsp:include page="include/side.jsp">
				<jsp:param value="new" name="tag"/>
			</jsp:include>
			--><div class="span9">			
				<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:15px">
					<li class="active">
						<a href="#"><i class="icon-th"></i>${goal.goalName}</a>
					</li>
					<li style="float:right"><i class="icon-edit"></i><a href="goal.jspx?m=toedit&id=${goal.id }" class="link-black">编辑</a></li>
				</ul>
				<div class="wall">
					<br>
					<p style="font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${goal.goalContent}</p><br>
					<div class="progress progress-danger">
						<div class="bar" style="width:0%;">${goal.state}%</div>
						<script type="text/javascript">
							$(document).ready(function(){
								$(".bar").animate({width:"${goal.state}%"},"slow");
							});
						</script>
					</div>
					<div class="page-header">
						<a class="btn btn-success" href="task.jspx?m=newtask&id=${goal.id }"><i class="icon-plus icon-white"></i>添加新任务</a>
					</div>
					<dl>
					<c:if test="${fn:length(taskList) == 0 }">
					该目标没有任何任务！
					</c:if>
					<c:forEach items="${taskList}" var="t">
						<dt style="margin-top:15px">
						<i class="icon-bookmark"></i>
						<a href="task.jspx?m=toedit?id=${t.id }">${t.taskTitle}</a>
						&nbsp;&nbsp;&nbsp;<a style="color:red;">${t.user.userName}</a>&nbsp;&nbsp;
						<c:choose>
							<c:when test="${t.time eq 'a'}">
								还没有开始！
							</c:when>
							<c:when test="${t.time eq 'b'}">
								<c:choose>
									<c:when test="${up.userid eq t.userid}">
										<a href="task.jspx?m=edit">
											修改进度
										</a>
									</c:when>
								</c:choose>
							</c:when>
							<c:when test="${t.time eq 'c'}">
								已经过期！
							</c:when>
						</c:choose>
						
						
						</dt>
						<dd>${d.taskContent}</dd><br>
						
						<div class="layout">
							 <div class="layout-slider" style="width:100%">
	      						<span style="display: inline-block; width: 600px; padding: 0 5px;"><input id="Slider1${t.id }" type="slider" name="price" value="0;0"/></span>
	    					</div>
							 <script type="text/javascript" charset="utf-8">
	     						 jQuery("#Slider1${t.id }").slider({ from: 0, to: 100, step: 1, smooth: true, round: 1, dimension: "&nbsp;%", skin: "round_plastic" });
	   						 </script>
						</div>
						<div class="progress">
							<div class="bar" style="width:0%;">${t.plan}%</div>
							<script type="text/javascript">
									$(document).ready(function(){
										$(".bar").animate({width:"${t.plan}%"},"slow");
									});
								</script>
						</div>
					</c:forEach>
					</dl>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="static/js/jquery.js"></script>
	<script type="text/javascript" src="static/js/jqueryui.js"></script>
	<script type="text/javascript" src="static/js/jquery.illuminate.0.7.min.js"></script>
	
	
	
	
	
	<script type="text/javascript">
		$(document).ready(function(){
				
			$('#button').illuminate({
				'intensity': '0.5',
				'color': '#2c2c2c'
			});
				
		});
			
	</script>
</body>
</html>